<template>
  <div id='tmpl'>
      <div id='list'>
        <ul id='ullist'>
            <li>全部</li>
          <li v-for='(item,index) in list' @click='getphotolist(item.id)'>{{item.title}}</li>
        </ul>
      </div>
      <div id='photolist' v-for='(item,index) in info'>
          <router-link v-bind="{to:'/photo/info/'+item.id}">
               <img v-bind:src="item.img_url">
          </router-link>
         
          <div id="desc">
               <h4>{{item.title}}</h4>
               <span>{{item.zhaiyao}}</span>
          </div>
         
      </div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
  name: "photolist",
  data () {
    return {
        list:[],
        info:[]
    };
  },
  created(){
      this.getimgcategory()
      var all=0;
      this.getphotolist(all)
  },
  methods:{
        getimgcategory(){
            var url=this.common.domain+'/api/getimgcategory'
            this.$http.get(url).then(function(res){
                var data=res.body;
                if(data.status!=0){
                    Toast(data.message);
                    return;
                }
                this.list=data.message
                this.$nextTick(function(){
                var ullist=document.getElementById('ullist');
                var lis=ullist.children
                var count=null;
                for(var i=0;i<lis.length;i++){
                    count+=lis[i].offsetWidth;
                }
                ullist.style.width=count+15+'px'

                })
               
            })
        },
        getphotolist(cateid){
            var cateid=cateid || 0
            var url=this.common.domain+'/api/getimages/'+cateid;
            this.$http.get(url).then(function(res){
                var data=res.body;
                this.info=data.message;

            })
        }
  }
}
</script>
<style lang="css" scoped>
#list{
    width: 350px;
    height: 50px;
    overflow:auto;
}
#list ul{
    height: 30px;
}
#list ul li{
    padding:6px;
    font-size: 14px;
    display: inline-block;
    color:blue;
    cursor:pointer;
}
#photolist{
    width:100%;
    height: 300px;
    position:relative;
}
#photolist img{
     display:block;
     width:100%;
     height: 300px;
}
#photolist #desc{
     width:100%;
    position: absolute;
    left: 0;
    bottom: 2px;
    color:#fff;
}
#desc span{
    opacity: 0.6;
  font-size: 12px;
}
#desc h4{
    opacity: 0.8;
}
</style>